<template>
  <div>
    <el-button type="primary" class="btn" size="small" @click="addClue">录入线索</el-button>
    <el-button type="success" class="btn" size="small" @click="importExcel">导入线索excel</el-button>
    <el-button type="danger" class="btn" size="small" @click="batchDelClue">批量删除</el-button>

    <el-table
      :data="clueList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"/>
      <el-table-column type="index" label="序号" width="65"/>
      <el-table-column property="ownerDo.name" label="负责人" width="100" />
      <el-table-column property="activityDo.name" label="所属活动" show-overflow-tooltip />
      <el-table-column label="姓名" show-overflow-tooltip>
        <template #default="scope">
          <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
        </template>
      </el-table-column>
      <el-table-column property="appellationDo.typeValue" label="称呼" />
      <el-table-column property="phone" label="手机" width="120" />
      <el-table-column property="weixin" label="微信" width="120" />
      <el-table-column property="needLoanDo.typeValue" label="是否贷款" />
      <el-table-column property="intentionStateDo.typeValue" label="意向状态" />
      <el-table-column property="intentionProductDo.name" label="意向产品" show-overflow-tooltip />
      <el-table-column property="stateDo.typeValue" label="线索状态">
        <template #default="scope">
          <el-tag type="success" v-if="parseInt(scope.row.state) === -1">{{ scope.row.stateDo.typeValue }}</el-tag>
          <el-tag type="primary" v-else>{{ scope.row.stateDo.typeValue }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="sourceDo.typeValue" label="线索来源" />
      <el-table-column property="nextContactTime" label="下次联系时间" width="165" />
      <el-table-column label="操作" width="230">
        <template #default="scope">
          <el-button type="primary" size="small" @click="view(scope.row.id)">详情</el-button>
          <el-button type="success" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button v-hasPermission="'clue:delete'" type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p>
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          @prev-click="toPage"
          @next-click="toPage"
          @current-change="toPage"/>
    </p>

    <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="55%" center draggable>
        <el-upload
          ref="uploadRef"
          method="post"
          :http-request="uploadFile"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary" size="small">选择Excel文件</el-button>
          </template>
          仅支持后缀名为.xls或.xlsx的文件

          <template #tip>
            <div class="fileTip">
              重要提示:
              <ul>
                <li>上传仅支持后缀名为.xls或.xlsx的文件;</li>
                <li>给定Excel文件的第一行将视为字段名;</li>
                <li>请确认您的文件大小不超过50MB;</li>
                <li>日期值以文本形式保存, 必须符合yyyy-MM-dd格式;</li>
                <li>日期时间以文本形式保存, 必须符合yyyy-MM-dd HH:mm:ss的格式;</li>
              </ul>
            </div>
          </template>
        </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="importExcelDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitExcel">导入</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { doGet, doPost } from '../http/httpRequest'
import { messageTip } from '../util/util'

export default {
  name: 'ClueView',
  inject: ['reload'],
  data() {
    return {
      // 线索列表对象
      clueList: [{
        ownerDo: {},
        activityDo: {},
        appellationDo: {},
        needLoanDo: {},
        intentionStateDo: {},
        intentionProductDo: {},
        stateDo: {},
        sourceDo: {}
      }],
      pageSize: 0,
      total: 0,
      // 导入线索excel的弹窗
      importExcelDialogVisible: false
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    // 线索详情
    view(id) {
      this.$router.push('/dashboard/clue/detail/' + id)
    },
    // 编辑线索
    edit(id) {
      this.$router.push('/dashboard/clue/edit/' + id)
    },
    // 录入线索
    addClue() {
      this.$router.push('/dashboard/clue/add')
    },
    // 导入excel
    uploadFile(param) {
      // 获取file文件
      let fileObj = param.file
      let formData = new FormData()
      formData.append('file', fileObj)
      doPost('/api/importExcel', formData).then(resp => {
        if(resp.data.code === 200) {
          messageTip('导入成功', 'success')
          // 清理上传文件
          this.$refs.uploadRef.clearFiles()
          this.reload()
        } else {
          messageTip('导入失败', 'error')
        }
      })
    },
    submitExcel() {
      this.$refs.uploadRef.submit() // 会触发http-request函数, 进而触发uploadFile函数
    },
    // 线索导入excel
    importExcel() {
      this.importExcelDialogVisible = true
    },
    handleSelectionChange() {},
    getData(current) {
      doGet('/api/clues', {
        current: current
      }).then(resp => {
        if(resp.data.code === 200) {
          this.clueList = resp.data.data.list
          this.pageSize = resp.data.data.pageSize
          this.total = resp.data.data.total
        }
      })
    },
    toPage(current) {
      this.getData(current)
    }
  }
}
</script>

<style scoped>
  .el-table {
    margin-top: 15px;
    height: 460px;
  }
  .fileTip {
    padding-top: 15px;
  }
  li {
    margin-bottom: 5px;
  }
</style>
